<template>
  <!-- 我的发布列表页面 -->
  <view class="main">
    <view class="top_tou">
      <view class="left_" @tap="fanLastPage">
        <image
          src="../../images/circle/zuojiantou.png"
          mode="aspectFill"
        ></image>
      </view>
      <view class="center_"> 我的发布 </view>
      <view class="right_"></view>
    </view>
    <!-- 无发布展示 -->
    <view class="wu" v-if="list.length < 1">
      <image src="../../imges/zwsxh.png" mode="aspectFill"></image>
      <text>暂无发布微帖</text>
    </view>
    <view v-if="list.length > 0" class="bac">
      <view class="release" v-for="item in list" @tap="toDetail(item.id)">
        <view class="head">
          <view class="left">
            <view style="position: relative">
              <image :src="item.avatarUrl" mode="aspectFill"></image>
              <image
                v-if="item.verified"
                style="
                  position: absolute;
                  width: 30rpx;
                  height: 30rpx;
                  right: -4rpx;
                  bottom: -4rpx;
                "
                src="../../images/circle/v.png"
                mode="aspectFill"
              ></image>
            </view>
            <view class="text">
              <view class="top">
                <text class="name">{{ item.realName }}</text>
                <text>{{ item.post }}</text>
              </view>
              <view class="bottom">
                {{ item.company }}
              </view>
            </view>
          </view>
          <text>{{ item.showDate }}</text>
        </view>
        <view class="content">
          <text>{{
            item.content == "" ? "更多精彩内容，尽在一起来往" : item.content
          }}</text>
          <!-- <image :src="item.imageUrl" mode="aspectFill"></image> -->
        </view>
        <view class="foot">
          <view class="left">
            <image
              class="touxiang"
              v-if="item.orgUrl"
              :src="item.orgUrl"
              mode="aspectFill"
            ></image>
            <image
              class="touxiang"
              v-else
              src="../../images/circle/photo.png"
              mode="aspectFill"
            ></image>
            <view class="xinxi">
              <view class="gs">{{ item.orgName }}</view>
              <view class="bot">
                <text>成员 {{ item.userCount }}</text>
                <text class="tiezi">微帖 {{ item.postCount }}</text>
                <!-- thumbsCount点赞数 commentsNumber评论数 -->
              </view>
            </view>
          </view>
          <view class="right">
            <image
              class="dianzan"
              src="../../imges/zan1.png"
              mode="aspectFill"
            ></image>
            <text class="dzs" v-if="item.thumbsCount != 0">{{
              item.thumbsCount
            }}</text>
            <image
              class="pinglun"
              src="../../imges/pinglun3.png"
              mode="aspectFill"
            ></image>
            <text v-if="item.commentsNumber != 0">{{
              item.commentsNumber
            }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import request from "../../utils/request.js";
export default {
  data() {
    return {
      haveOrNot: true,
      list: [],
      bottom: false,
      noMore: false,
      pageSize1: 10,
    };
  },
  onLoad() {
    this.listData();
  },
  onReachBottom() {
    uni.showLoading({
      title: "加载中",
    });
    this.bottom = true;
    this.pageSize1 = this.pageSize1 + 10;
    this.listData();
  },
  onPullDownRefresh() {
    this.bottom = false;
    this.noMore = false;
    this.pageSize1 = 10;
    setTimeout(() => {
      this.listData();
      uni.stopPullDownRefresh();
      uni.showToast({
        title: "刷新成功",
        duration: 1500,
        icon: "none",
      });
    }, 1000);
  },
  methods: {
    fanLastPage() {
      //返回上一页
      window.history.go(-1);
    },
    toDetail(id) {
      uni.navigateTo({
        url: "/pages/index/trickDetail?id=" + id,
      });
    },
    listData() {
      let token = uni.getStorageSync("token");
      const that = this;
      // console.log(token, 'token')
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "h5/home/release",
          method: "POST",
          header: {
            "content-type": "application/json;charset=UTF-8",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": this.globalData.apiVersion,
            "Source-Type": 7,
            token: token,
          },
          data: {
            pageNumber: 1,
            pageSize: this.pageSize1,
            type: 3,
          },
        }).then((res) => {
          if (res.data.code == 200) {
            that.list = res.data.data.rows;
            if (res.data.data.total == 0) {
              uni.hideLoading();
              return false;
            }
            if (
              that.bottom &&
              that.list.length >= res.data.data.total &&
              !that.noMore
            ) {
              uni.hideLoading();
              uni.showToast({
                title: "加载完成",
                duration: 1000,
                icon: "none",
              });
              that.noMore = true;
              return false;
            }
            if (that.list.length >= res.data.data.total && that.bottom) {
              uni.hideLoading();
              uni.showToast({
                title: "没有更多数据了",
                duration: 1000,
                icon: "none",
              });
            } else if (
              that.list.length < res.data.data.total &&
              that.bottom &&
              that.list.length != 0
            ) {
              uni.hideLoading();
              uni.showToast({
                title: "加载完成",
                duration: 1000,
                icon: "none",
              });
            }
          } else if (res.data.code == 401) {
            uni.showToast({
              title: "登录失效，请重新授权登录！",
              duration: 2000,
              icon: "none",
            });
            setTimeout(() => {
              uni.navigateTo({
                url: "/pages/index/index",
              });
            }, 2000);
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
  },
};
</script>

<style scoped lang="less">
.main {
  height: 100vh;
  padding-top: 108rpx;
  background-color: #f8f8f8;
  box-sizing: border-box;
  .top_tou {
    box-sizing: border-box;
    display: flex;
    padding: 0 38rpx;
    width: 750rpx;
    height: 92rpx;
    background: #f8f8f8;
    // line-height: 92rpx;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;

    .left_ {
      height: 40rpx;
      width: 40rpx;

      image {
        height: 40rpx;
        width: 40rpx;
      }
    }

    .center_ {
      font-size: 36rpx;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      text-align: center;
      color: #111111;
    }

    .right_ {
      width: 18rpx;
    }
  }
  .bac {
    background-color: #f8f8f8;
  }
  .wu {
    margin-top: 300rpx;
    display: flex;
    flex-direction: column;
    align-items: center;

    image {
      width: 320rpx;
      height: 260rpx;
    }

    text {
      font-size: 28rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(136, 136, 136, 1);
      line-height: 37px;
    }
  }
  .release {
    width: 714rpx;
    margin-bottom: 20rpx;
    margin-left: 18rpx;
    border-radius: 15rpx;
    background-color: #ffffff;
    padding: 0 30rpx;
    box-sizing: border-box;
  }
  .head,
  .content,
  .foot {
    // background-color: #ffffff;
  }
  .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 29rpx;
    color: #333333;
    padding: 27rpx 0 15rpx 0;
    margin-bottom: 2rpx;
    margin-top: 12rpx;
    border-bottom: 1rpx solid #eee;
    .left {
      display: flex;
      align-items: center;
      image {
        width: 68rpx;
        height: 68rpx;
        margin-right: 13rpx;
      }
      .top {
        font-size: 28rpx;
        color: #646464;
        .name {
          margin-right: 30rpx;
        }
      }
      .bottom {
        font-size: 20rpx;
        color: #969696;
      }
    }
    text {
      font-size: 22rpx;
      color: #969696;
    }
  }
  .content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 33rpx;
    color: #333333;
    padding: 15rpx 0;
    margin-bottom: 2rpx;
    text {
      // width: 453rpx;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
      line-height: 28px;
    }
    image {
      width: 222rpx;
      height: 160rpx;
      border-radius: 10rpx;
    }
  }
  .foot {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 15rpx 0;
    .left {
      display: flex;
      align-items: center;
      .touxiang {
        width: 68rpx;
        height: 68rpx;
        margin-right: 18rpx;
        border-radius: 50%;
      }
      .xinxi {
        .gs {
          width: 400rpx;
          color: #176bd8;
          font-size: 29rpx;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
        }
        .bot {
          font-size: 22rpx;
          color: #999999;
          .tiezi {
            margin-left: 15rpx;
          }
        }
      }
    }
    .right {
      display: flex;
      align-items: center;
      .dianzan {
        width: 35rpx;
        height: 35rpx;
        margin-right: 5rpx;
      }
      .dzs {
        // margin-right: 40rpx;
      }
      text {
        font-size: 22rpx;
        color: #969696;
      }
      .pinglun {
        width: 30rpx;
        height: 30rpx;
        margin-left: 40rpx;
        margin-right: 5rpx;
      }
    }
  }
}
</style>
